<template>
    <div class="account_box">
      <div class="account_box_header">
        <el-button type="success" @click = "userAddClick">新建</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%">

        <!-- <el-table-column
        prop="id"
        label="昵称"
        align="id"
        width="180">
        </el-table-column> -->

        <el-table-column
        prop="name"
        label="昵称"
        align="center"
        width="180">
        </el-table-column>
        <el-table-column
        prop="username"
        label="用户名"
        align="center"
        width="180">
        </el-table-column>
        <el-table-column
        prop="password"
        align="center"
        label="密码">
        </el-table-column>
        <el-table-column
        prop="option"
        align="center"
        label="操作">
        <template slot-scope="slot">
            <el-button type="success" @click = "userChangeClick(slot.row)">修改</el-button>
            <el-button type="danger" @click = "userDeleteClick(slot)">删除</el-button>
        </template>
        </el-table-column>
      </el-table>
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <span>
          <div class="form">
            <el-form label-width="80px" :model="formLabelUser">
              <el-form-item label="昵称: ">
                <el-input v-model="formLabelUser.name"></el-input>
              </el-form-item>
              <el-form-item label="用户名: ">
                <el-input v-model="formLabelUser.username"></el-input>
              </el-form-item>
              <el-form-item label="密码: ">
                <el-input v-model="formLabelUser.password"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="userEnsureClick">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        title:"新建用户",
        isNew: true,  //标识是否是新建用户,true表示新建用户，false表示修改用户
        length: 1,    //记录表格的数组长度
        data:{
          name: '',   
          username: '',
          password: ''
        },
        formLabelUser: {
          // id: length,
          name: '',   
          username: '',
          password: ''
        },
        dialogVisible : false,
        tableData: [{
          // id: 0,
          name: '王小虎',
          username: '123456',
          password: '123456'
        }, ]
      }
    },
    methods: {
      handleClose(){
        this.formLabelUser = {
          // id: this.length,
          name: '',   
          username: '',
          password: ''
        }
        this.dialogVisible = false;
      },
      userAddClick(){ //新建用户按钮
        this.dialogVisible = true;
        this.isNew = true;
        this.title = '新建用户';
      },

      userChangeClick(row){ //修改按钮
        this.title = '修改用户';
        this.dialogVisible = true;
        this.isNew = false;
        this.formLabelUser.name = row.name;
        this.formLabelUser.username = row.username;
        this.formLabelUser.password = row.password;
        this.data.name = this.formLabelUser.name;
        this.data.username = this.formLabelUser.username;
        this.data.password = this.formLabelUser.password;
        console.log(this.data);
      },

      userDeleteClick(row){  //删除按钮
        this.$confirm('此操作将永久删除该用户信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tableData.splice(row.$index,1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },

      userEnsureClick(){ //确定按钮
        if(this.isNew){ //新建
          // this.formLabelUser.id = this.length;
          this.tableData.push(this.formLabelUser);
          this.length = this.length + 1;
          this.$message({
            message: '恭喜你，新建用户成功',
            type: 'success'
          });
        }
        else{   //修改
          this.tableData.forEach((item, index)=>{
            if(item.username == this.data.username){
              this.tableData[index].name = this.formLabelUser.name;
              this.tableData[index].username = this.formLabelUser.username;
              this.tableData[index].password = this.formLabelUser.password;
            }
          })
          this.$message({
            message: '恭喜你，修改用户成功',
            type: 'success'
          });
        }
        this.handleClose();

      },


    }
  }
</script>

<style lang="scss">
// #app,
// html,
// body {
// width: 100%;
// height: 100%;
// margin: 0px;
// padding: 0px;
// }
.account_box{
    width: 100%;
    height: 100%;
}
.account_box_header{
    // border: 1px solid red; 
    width: 100%;
    height: 50px;
}
// ::v-deep .el-button{
//   display: block;
// }

</style>